<template>
	<view class="parts-detail">
		<!-- top -->
		<view class="parts-detail-top">
			<view class="parts-detail-top-item">
				<view class="parts-detail-top-item-left">
					名称
				</view>
				<view class="parts-detail-top-item-right">
					{{detailInfo.parts_name }}
				</view>
			</view>
			<view class="parts-detail-top-item">
				<view class="parts-detail-top-item-left">
					库存
				</view>
				<view class="parts-detail-top-item-right">
					{{detailInfo.number }}
				</view>
			</view>
			<view class="parts-detail-top-item">
				<view class="parts-detail-top-item-left">
					单价
				</view>
				<view class="parts-detail-top-item-right">
					{{detailInfo.parts_price ||0}}
				</view>
			</view>
		</view>
		<!-- 入库出库就tabs -->
		<view class="parts-detail-check-tabs">
			<view class="parts-detail-check-tabs__item" :class="{ active: this.params.type === 1 }"
				@tap="changeType(1)">入库</view>
			<view class="parts-detail-check-tabs__item" :class="{ active: this.params.type=== 0 }" @tap="changeType(0)">
				出库</view>

		</view>
		<!-- 操作表单 -->
		<view class="form">
			<view class="line"> </view>
			<u--form labelWidth="90" required labelAlign="center" labelPosition="left" :model="params">
				<u-form-item label="数量" prop="number" borderTop borderBottom ref="item1">
					<u-number-box v-model="params.number" :max="maxNumber" :min="1" ref="numbers"></u-number-box>
				</u-form-item>
				<u-form-item label="备注" borderBottom>
					<u--input v-model="params.remarks" borderBottom border="bottom" placeholder="请输入备注"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<!-- 单独图片组 -->
		<view class="form-item">
			<view class="form-item__label">上传图片</view>
			<view class="form-item__content">
				<nt-upload :images="previewImage" @success="successUpload" :maxCount="9"></nt-upload>
			</view>
		</view>
		<view class="form-button">
			<u-button type="primary" text="确认" @tap="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		getPersonPartsDetails,
		postPersonPartsStockNumber
	} from "@/api"
	export default {
		async onLoad(e) {
			this.params.id = e.id
			await this.getDetail()
		},

		data() {
			return {
				listData: [],
				maxNumber: 100,
				oldMaxNumber: 0,
				detailInfo: {},
				params: {
					number: 1,
					id: 1,
					remarks: '',
					type: 1,
					images: []
				},
				total: null,
			}
		},
		methods: {
			async submit() {
				let params = JSON.parse(JSON.stringify(this.params))
				await this.$nextTick()
				this.params.number = this.$refs.numbers.currentValue
				if (this.params.number == 0 || this.params.number == '') {
					uni.showToast({
						title: '库存数量不能为空',
						icon: 'none'
					})
					return
				}
				params.images = params.images.map(e => e.url)
				// 提交请求
				let {
					code
				} = await postPersonPartsStockNumber(params)
				if (code === 1) {
					this.toast('添加成功')
					setTimeout(() => {
						this.back()
						uni.$emit('getList2')
					}, 1000)
				}
			},
			successUpload(e) {
				this.params.images = e
				console.log(this.params)
			},
			// 获取详情
			async getDetail(id) {
				const {
					msg
				} = await getPersonPartsDetails({
					id: this.params.id
				})
				this.detailInfo = msg
				this.maxNumber = msg.number
				this.previewImage = msg.images_list
				this.oldMaxNumber = msg.number
				this.$forceUpdate()
			},
			async changeType(type) {
				this.params.type = type
				this.maxNumber = type === 0 ? this.maxNumber = this.oldMaxNumber : 100
				await this.$nextTick()
				this.params.number = this.$refs.numbers.currentValue

			}
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-form-item__body {
		padding: 0 !important;
		height: 90rpx;

		&__left {
			border-right: 1rpx solid rgb(214, 215, 217);
		}

		&__right {
			padding-left: 10rpx
		}

	}

	.parts-detail {
		&-top {
			width: 100%;

			&-item {
				display: flex;
				height: 94rpx;
				line-height: 94rpx;
				border-bottom: 1px solid #C6C6C6;
				font-size: 24rpx;

				&-left {
					width: 33%;
					text-align: center;
					background: #ddd;
					color: #333;
					font-weight: bold;
				}

				&-right {
					padding-left: 40rpx;
					flex: 1;
					overflow-x: scroll;
					color: inherit;
				}
			}

		}

		&-check-tabs {
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 90rpx;
			// margin: 20rpx;
			background: #fff;
			padding: 40rpx;

			&__item {
				width: 45%;
				border-radius: 10rpx;
				text-align: center;
				color: #666;
				position: relative;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				border: 1rpx solid #ddd;

				&.active {
					border: 1rpx solid #1B5BC5;
					background-color: #1B5BC5;
					color: #fff;
				}
			}
		}

		.form {
			.line {
				margin: 0px;
				border-top: 1px solid rgb(214, 215, 217);
				width: 100%;
				border-top-color: rgb(214, 215, 217);
				border-right-color: rgb(214, 215, 217);
				border-left-color: rgb(214, 215, 217);
			}
		}

		.form-item {
			display: flex;
			border-bottom: 1rpx solid rgb(214, 215, 217);

			&__label {
				width: 90px;
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;

			}

			&__content {
				border-left: 1rpx solid rgb(214, 215, 217);
				flex: 1
			}
		}

		.form-button {
			padding: 20rpx
		}
	}
</style>